/**
 * title: 可以自己配置功能按钮
 * description: 通过`showActions`和`actions`来配置功能按钮
 */
import React, { useRef, useState } from 'react';
import { Form, Switch, Space, Checkbox } from 'antd';
import data from '../base/demoData.json';
import moduleConfig from '../base/moduleConfig';
import assets from '../../../assets';
import Arch from '@rasir/x6-arch';
import { ActionTypes } from '@rasir/x6-arch/es/types';
import registerList from '../base/register';
import 'antd/dist/antd.css';

const actionOptions = [
  { label: '撤销/重做', value: 'RE_UN_DO' },
  { label: '放大/缩小/全屏', value: 'ZOOM' },
  { label: '导出数据', value: 'EXPORT_DATA' },
  { label: '导入数据', value: 'IMPORT_DATA' },
  { label: '导出图片', value: 'EXPORT_IMG' },
  { label: '上传数据', value: 'SUBMIT' },
  { label: '复制节点', value: 'COPY' },
  { label: '粘贴节点', value: 'PASTE' },
  { label: '删除节点', value: 'DELETE' },
  { label: '清理缓存', value: 'CLEAR' },
];

const App = () => {
  const ref = useRef();
  const [showActions, setShowActions] = useState(false);
  const [actions, setActions] = useState<ActionTypes[]>();

  const onCreateNode = (nodeData) => {
    const { name, preId, moduleType } = nodeData;
    return Promise.resolve({
      id: Date.now() + '',
      name,
      shape: 'arch-node',
      type: 'node',
      preId,
      moduleType,
    });
  };

  return (
    <div>
      <Space size={10}>
        <Form size="small">
          <Form.Item label="使用功能按钮">
            <Switch checked={showActions} onChange={setShowActions} />
          </Form.Item>
          <Form.Item label="功能分类">
            <Checkbox.Group
              options={actionOptions}
              disabled={!showActions}
              onChange={(v) => setActions(v as ActionTypes[])}
            />
          </Form.Item>
        </Form>
      </Space>
      <Arch
        showActions={showActions}
        actions={actions}
        data={data}
        ref={ref}
        moduleConfig={moduleConfig}
        assets={assets}
        registerList={registerList}
        defaultNodeShape="node"
        defaultEdgeShape="link"
        onCreateNode={onCreateNode}
        cache={false}
        onChange={(data) => {}}
      />
    </div>
  );
};

export default App;
